<template>
  <div class="user-add">
    <el-row>
      <el-col :span="12">
        <!--        表单-->
        <el-form ref="ruleForm" :model="form" label-width="80px" :rules="rules">
<!--          所属角色-->
          <el-form-item label="所属角色" prop="pid">
            <el-select v-model="form.roleid" placeholder="请选择">
              <el-option
                v-for="item of roleList" :key="item.id"
                :value="item.id" :label="item.rolename" ></el-option>
            </el-select>
          </el-form-item>
          <!--          username-->
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" placeholder="请输入账号"></el-input>
          </el-form-item>
<!--          密码-->
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" :placeholder="$route.params.id? '默认为空表示不修改密码': '请输入密码'"></el-input>
          </el-form-item>
          <!--          状态-->
          <el-form-item label="状态">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#f00"
              inactive-color="#eee"

            ></el-switch>
          </el-form-item>
          <!--          提交 修改-->
          <el-form-item v-if="typeof $route.params.id == 'undefined'">
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          </el-form-item>
          <el-form-item v-else>
            <el-button type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: "vUserAdd",
    mounted() {
      this.$store.dispatch('updaterole') //请求角色列表--服务所属角色一栏
      //请求单个角色详情 判断是否有id参数
      if (this.$route.params.id) {//有
        this.axios({
          url: '/api/userinfo',
          params: {uid: this.$route.params.id},
          method: 'get'
        }).then(res => {
          this.form = res.list
          this.form.password = ''
          this.form.uid = this.$route.params.id //手动添加上id 提交时需要
        })
      }
    },
    data() {
      return {
        form: {
          roleid: '',
          username: '',
          password: '',
          status: 1
        },
        rules: {
          rolename: [
            {required: true, message: '请输入标题', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      ...mapState(['roleList'])
    },
    methods: {
      //提交表单功能
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('确定添加该管理者?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {//确定添加后，发送请求
              let url = this.$route.params.id?'/api/useredit':'/api/useradd'
              this.axios({
                method: 'post',
                url:url,
                data: this.form
              }).then(res => {
                if (res.code == 200) {
                  this.$store.dispatch('updateuser',{size: 2, page: 1})
                  this.$message({
                    type: 'success',
                    message: res.msg
                  });
                  this.$router.go(-1)
                } else {
                  this.$message({
                    type: 'success',
                    message: res.msg
                  });
                }
              })

            })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '取消操作'
                });
              });
          } else {
            this.$message({
              type: 'info',
              message: '信息填写错误'
            });
            return false;
          }
        });
      },
    }
  }
</script>

<style scoped>

</style>
